<template>
    <el-row style="height: 100%;background-color: #f3f4f9">
        <el-row style="height: 10%;border-bottom-style: solid;border-bottom-color: #e6e6e6;background-color: #ffffff">
            <Header></Header>
        </el-row>
        <el-row :gutter="20" style="height: 90%">
            <el-col :span="4" style="height: 100%;">
                <Navigator></Navigator>
            </el-col>
            <el-col :span="20" style="border-top: 1px solid #2c3e50;padding: 0;height: 100%">
                <el-row>
                    <el-col :span="4">
                        <h1>客户页功能</h1>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4">
                        <el-button type="primary" @click="showDialog">新建转账</el-button>
                    </el-col>
                </el-row>
                <el-divider></el-divider>
                <el-row>
                    <el-col :span="4">
                        <h3>用户转账情况</h3>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20" :offset="2">
                        <el-table :data="tableData" style="width: 100%">
                            <el-table-column prop="tid" label="交易编号">
                            </el-table-column>
                            <el-table-column prop="sendAddress" label="发送用户地址">
                            </el-table-column>
                            <el-table-column prop="receiveAddress" label="接收用户地址">
                            </el-table-column>
                            <el-table-column prop="status" label="交易状态">
                            </el-table-column>
                            <el-table-column prop="balance" label="交易金额">
                            </el-table-column>
                        </el-table>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <el-dialog title="提交转账申请" :visible.sync="dialogVisible" width="50%">
            <el-form>
                <el-form-item label="目标账户地址:">
                    <el-input type="primary" v-model="transactionForm.userAddress"></el-input>
                </el-form-item>
                <el-form-item label="余额">
                    <el-input type="primary" v-model="transactionForm.balance"></el-input>
                </el-form-item>
            </el-form>
            <el-row style="margin-top:10px">
                <el-button type="primary" @click="submitTransaction">确认</el-button>
            </el-row>
               
        </el-dialog>
    </el-row>
</template>
  
<script>

import Header from "@/components/Header";
import Navigator from "@/components/Navigator";

export default {
    components: { Header, Navigator },
    data() {
        return {
            dialogVisible: false,
            transactionForm: {
                userAddress:"",
                balance:""
            },
            tableData:[]

        }
    },
    mounted() {
        this.queryUserTransactions();
    },
    methods: {
        showDialog() {
            this.dialogVisible = true;
        },
        submitTransaction() {
            let form = {
                "sendAddress": this.$cookies.get("account_address"),
                "receiveAddress":this.transactionForm.userAddress,
                "balance":this.transactionForm.balance
            }
            this.axios.post("/user_transaction_submit", form).then((res) => {
                if (res.data.code == 200) {
                    //请求成功
                    alert("创建交易提交申请成功！")
                }else {
                    alert(`请求失败，原因为${res.data.data}`)
                }
            })
        },
        queryUserTransactions() {
            let reqForm = {
                "address": this.$cookies.get("account_address")
            }
            this.axios.post("/query_user_tx", reqForm).then((res) => {
                if (res.data.code == 200) {
                    //请求成功
                    this.tableData = res.data.data.send_tx
                }else {
                    alert(`请求失败，原因为${res.data.data}`)
                }
            })
        }

    }
}
</script>
  
<style scoped>
.container {
    height: 100%;
    width: 100%;
    position: fixed;
}

.aside {
    background-color: #545c64;
}

.main {
    background-color: #fff;
}

.form {
    width: 400px;
    margin: 0 auto;
}
</style>